<template>
  <el-card class="box-card">
    <el-tabs v-model="activeName">
      <el-tab-pane label="组织架构" name="first">
        <div class="content-box">
          <tree-item is-root @add="add" />
          <hr>
          <!--
            data属性绑定的数据就是要渲染的数据
              数组里有多少个元素就有多少个1级
              这一级里有没有子元素，跟children有关
              某一级里但凡有children并且不为空，就会有子级
            props属性设置找哪个属性作为文字显示，找哪个属性作为子级

            default-expand-all 默认展开所有节点
            :expand-on-click-node="false"代表关闭点击节点就能展开和折叠功能
           -->
          <el-tree
            v-loading="loading"
            :data="treeData"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          >
            <!-- 把每个节点的数据传递给这个组件里 -->
            <!-- data就是每一行数据 -->
            <template v-slot="{ data }">
              <tree-item :tree-node="data" @del="del" @add="add" @view="view" />
            </template>
          </el-tree>
        </div>
      </el-tab-pane>
    </el-tabs>

    <add-dept ref="addDept" @refresh="getData" />
  </el-card>
</template>

<script>
// 导入组件
import TreeItem from './components/TreeItem'
import AddDept from './components/AddDept.vue'
// 导入接口
import { deptListAPI, delDeptAPI, deptDetailAPI } from '@/api/departments'
// 导入递归函数
import { array2Tree } from '@/utils/index'
export default {
  name: 'Departements',
  components: {
    TreeItem,
    AddDept
  },

  data() {
    return {
      activeName: 'first',
      loading: true,
      treeData: [],
      defaultProps: {
        // 找子级，右边的children代表找children属性作为子级
        children: 'children',
        // 要显示的文字，右边的label代表要显示的文字找label属性
        // 如果右边改成name，就代表找name属性作为文字显示
        label: 'name'
      }
    }
  },

  created() {
    this.getData()
  },
  methods: {
    // 封装获取部门列表的方法
    async getData() {
      const res = await deptListAPI()
      /*
      // 先找出所有的1级
      const list = res.data.depts.filter(v => {
        if (v.pid === '') {
          // 来到if里肯定就是1级，再找1级的2级
          // 遍历所有的元素
          const children = res.data.depts.filter(v2 => {
            return v2.pid === v.id
          })

          v.children = children

          return true
        }
      })
      */

      // console.log(res)
      this.treeData = array2Tree(res.data.depts, '')
      this.loading = false
    },
    // 删除的方法
    del(id) {
      // 1. 弹出一个确认框
      this.$confirm(this.$t('tips.del')).then(async() => {
        // 点了确认--发请求
        await delDeptAPI(id)
        // 删除成功的提示
        this.$message.success('删除成功')
        // 重新加载数据
        this.getData()
      })
    },
    // 新增子部门
    add(id) {
      // 把拿到的id作为对话框里的pid进行赋值
      this.$refs.addDept.form.pid = id
      // 修改标题
      this.$refs.addDept.title = '新增部门'
      // 显示出对话框
      this.$refs.addDept.dialogShow = true
    },
    async view(id) {
      // 根据id把当前数据详情查出来
      const res = await deptDetailAPI(id)
      // 数据回显
      this.$refs.addDept.form = res.data
      // 修改标题
      this.$refs.addDept.title = '查看部门'
      // 先存一份原本的名字和code
      this.$refs.addDept.oldForm.name = res.data.name
      this.$refs.addDept.oldForm.code = res.data.code
      // 显示出对话框
      this.$refs.addDept.dialogShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding: 80px 120px;
}
</style>
